<template>
    <div>
        vue3dom 操作方法
        <div ref="mydom" class="mydom-class">
        </div>
        <el-button @click="logDom">
            点击获取dom
        </el-button>
        <div>
            姓名：{{person.name}}
            年龄：{{person.age}}
            职业：{{person.obj2.type}}
            高度：{{person.obj2.height}}
            数组：{{person.arr1}}
        </div>
        <el-button @click="changeInfo">
            点击替换
        </el-button>
        <Children1 @hello ='hello'  msg="乖乖" name="清风" school="华南小学">
            <template v-slot:first> 
                我是插槽的东西
            </template>
        </Children1>
        <Children2  @hello ='hello'/>
    </div>
</template>

<script setup>
import  Children1 from './components/textVue3.vue'
import  Children2 from './components/text2Setup.vue'
import { reactive, ref } from 'vue'
    const mydom = ref()
    let name = ref('李xx')
    let age = ref(18)
    // ref发现是引用类型 调用了reactive 最终返回一个proxy对象
    // let  obj = ref({
    //     type:'前端',
    //     height:'10'
    // })
    let obj2 = reactive({
        type:'前端',
        height:'10'
    })
    // 数组响应式
    let arr1 = reactive([1,2,3,4,5])
    //使用reactive 将数据集合起来 返回一个proxy对象 响应式数据为深层次 
    let  person = reactive({
        name:'李xx',
        age:18,
        obj2:{
            type:'前端',
        height:'10'
        },
        arr1:[1,2,3,4,5]
    })
    let logDom=() => {
        mydom.value.innerHTML = '231'
        mydom.value.style = `color:red`
        console.log(mydom.value)
    }
    let changeInfo = () => {
        // 基本类型改变值
        // name.value = '张XX'
        // age.value = 38
        // 对象类型改变值
        // obj.value.type ='ui'
        // obj.value.height ='20'
        //reactive 直接.语法修改
        // obj2.type='ui'
        // obj2.height ='20'
        console.log(person)
        person.arr1[0] = 8
    }
    let hello = (value)=>{
        console.log(value)
        alert(`你好我传过来的值是:${value}`)
    }

</script>

<style>

</style>